<template>
  <div class="">
    <el-tree :expand-on-click-node="false"
      :data="data" style="font-size: 16px"
      default-expand-all
      node-key="id">
      <span :class="'custom-tree-node' + (id === node.data.id ? ' custom-tree-node-active' : '')" slot-scope="{ node }">
        <span class="trTe" :title="node.label" @click="() => selectNode(node)">{{ node.label }}</span>
        <span class="trBu">
          <i class="el-icon-circle-plus-outline" v-if="node.data.parent_id === '-'" @click="() => append(node)"></i>
          <i v-if="node.data.parent_id !== '-'" class="el-icon-edit ml5" @click="() => edit(node)"></i>
          <i v-if="node.data.parent_id !== '-'" class="el-icon-delete ml5" @click="() => remove(node)"></i>
        </span>
      </span>
    </el-tree>
    <Dialog ref="dialog" :get-data="getList" :info="dialog" />
  </div>
</template>

<script>
import { queryOrgans, delOrgan } from '@/api/organ'
import Dialog from './components/organ-dialog'

export default {
  name: '',
  components: { Dialog },
  inject: ['app'],
  props: {
    info: {
      type: Object,
      default: null
    },
    getData: {
      type: Function,
      default: function() {}
    }
  },
  watch: {
    getData: {
      type: Function,
      default: function() {}
    }
  },
  provide() {
    return {
      app: this.app
    }
  },
  data() {
    return {
      data: [],
      id: '',
      dialog: {
        edit: {},
        title: '',
        type: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(e) {
      queryOrgans({
        ...e
      }).then(response => {
        let organs = response.organs
        let data = [{id: '', label: '全部', parent_id: '-'}]
        organs.forEach(element => {
          let p = {}
          p.id = element.id
          p.label = element.name
          p.name = element.name
          p.parent_id = element.parent_id
          // p.children = []
          // if(element.children) {
          //   let children = []
          //   element.children.forEach(item => {
          //     let c = {}
          //     c.id = item.id
          //     c.label = item.name
          //     c.name = item.name
          //     c.parent_id = item.parent_id
          //     children.push(c)
          //   })
          //   p.children = children
          // }
          data.push(p)
        })
        this.data = data
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    append(node) {
      this.dialog.title = '新增'
      this.dialog.type = 'add'
      let data = {}
      let parent_id = node.data.parent_id
      if(parent_id === '-') {
        data.id = 0
        data.parent_id = 0
      }else{
        data.id = node.data.id
        data.parent_id = node.data.parent_id
      }
      this.app.dialogParam(this.dialog.edit, ['id', 'parent_id', 'name'], data)
      this.$refs['dialog'].visible = true
    },
    edit(node){
      this.dialog.title = '编辑'
      this.dialog.type = 'edit'
      this.app.dialogParam(this.dialog.edit, ['id', 'parent_id', 'name'], node.data)
      this.$refs['dialog'].visible = true
    },
    remove(node) {
      this.$confirm('此操作将删除信息，数据将无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        delOrgan({
          ids: node.data.id
        }).then(response => {
          this.getList()
          this.$message.success('删除成功')
        })
      })
    },
    selectNode(e) {
      this.getData(e.data)
      this.id = e.data.id
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node-active{
  background-color:#E4E7ED;
  /* color:#2775ff!important; */
}
.trTe{
  display: block;
  max-width: 115px;
  overflow: hidden;
}
</style>
